<template>
  <div v-loading="loading"  element-loading-text="文件上传中...">
    <!-- 输入框前面添加文件类型文字 -->
    <span>文件类型：</span>
    <el-select v-model="fileType" placeholder="请选择文件类型" style="margin-left: 10px;">
      <el-option
        v-for="(item, index) in fileTypeList"
        :key="item.id"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <div class="upload-wrapper">
      <!-- 上传区域左侧添加上传文字 -->
      <span>上传文件：</span>
      <el-upload
        class="upload-demo"
        ref="uploadRef"
        action="#"
        :auto-upload="false"
        :multiple="true"
        :on-change="handleChange"
        :on-remove="handleRemove"
        :file-list="fileList"
        :show-file-list="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </div>
    <div class="file-list-container">
      <div class="other-file-list">
        <div v-for="(file, index) in getOtherFiles" :key="index" class="other-file-item">
          <span @click="previewFile(file)">{{ file.name }}</span>
          <i class="el-icon-delete" @click="removeFile(file)"></i>
        </div>
      </div>
      <div class="image-list">
        <div v-for="(file, index) in getImageFiles" :key="index" class="image-item">
          <img :src="generateObjectURL(file.raw)" alt="preview" />
          <i class="el-icon-delete" @click="removeFile(file)"></i>
        </div>
      </div>
    </div>
    <div class="button-container">
      <el-button type="primary" :disabled="!fileList.length" @click="handleUpload">确定</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import { uploadFile } from '@/api/pfoc/filelibrary'
import {remote} from "@/api/admin/dict";
export default {
  name: 'uploadFile',
  data() {
    return {
      fileList: [],
      fileTypeList: [],
      fileType: null,
      loading: false,
    };
  },
  computed: {
    getImageFiles() {
      return this.fileList.filter((file) => this.isImage(file.name));
    },
    getOtherFiles() {
      return this.fileList.filter((file) =>!this.isImage(file.name));
    }
  },
  created() {
    this.getFileType();
  },
  methods: {
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    handleUpload() {
      if (!this.fileType) {
        this.$message.error('请选择文件类型');
        return;
      }
      const formData = new FormData();
      this.fileList.forEach((file) => {
        formData.append('files', file.raw);
      });
      formData.append('fileType', this.fileType);
      this.loading = true;
      uploadFile(formData).then(response => {
        if (!response.data.data){
          this.$notify.info('上传失败,请检查文件名与现有文件是否重复！');
           this.loading = false;
          return
        }
        this.$message({
          message: "上传成功",
          type: 'success'
        });
         this.loading = false;
        this.handleCancel();
      }).catch(response => {
        this.$message({
          message: "上传失败了",
          type: 'error'
        });
         this.loading = false;
      })
    },
    isImage(filename) {
      const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'webp'];
      const ext = filename.split('.').pop().toLowerCase();
      return imageExtensions.includes(ext);
    },
    previewFile(file) {
      if (typeof URL!== 'undefined' && typeof URL.createObjectURL === 'function') {
        const url = URL.createObjectURL(file.raw);
        window.open(url, '_blank');
      } else {
        this.$message.error('当前浏览器不支持文件预览功能，请使用现代浏览器。');
      }
    },
    removeFile(file) {
      const index = this.fileList.indexOf(file);
      if (index!== -1) {
        this.fileList.splice(index, 1);
      }
    },
    generateObjectURL(file) {
      if (typeof URL!== 'undefined' && typeof URL.createObjectURL === 'function') {
        return URL.createObjectURL(file);
      }
      return '';
    },
    handleCancel() {
      this.fileList = [];
      this.fileType = null;
      this.$emit('closeUpload');//关闭新增页面
    },
    //获取工段
    getFileType(){
      remote("file_type").then(response => {
        this.fileTypeList=response.data.data;
      })
    },
  }
};
</script>

<style scoped>
/deep/.el-upload-dragger {
  width: 230px !important;
  height: 160px !important;
}
/deep/.el-upload-dragger .el-icon-upload{
  margin: 20px 0 16px !important;
}
.upload-demo {
  margin-bottom: 20px;
}

.upload-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.file-list-container {
  display: flex;
  gap: 20px;
  height: 300px; /* 设置固定高度 */
  overflow-y: auto; /* 超出高度显示滚动条 */
  border: 1px dashed #d9d9d9;
}

/* 修改滚动条样式 */
.file-list-container::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度 */
}

.file-list-container::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道背景颜色 */
}

.file-list-container::-webkit-scrollbar-thumb {
  background: #888; /* 滚动条滑块颜色 */
  border-radius: 3px; /* 滚动条滑块圆角 */
}

.file-list-container::-webkit-scrollbar-thumb:hover {
  background: #555; /* 鼠标悬停时滚动条滑块颜色 */
}

.other-file-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.other-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.other-file-item span {
  cursor: pointer;
  color: #409eff;
  text-decoration: underline;
}

.other-file-item .el-icon-delete {
  color: red;
  cursor: pointer;
}

.image-list {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
}

.image-item {
  position: relative;
  width: 100px;
  height: 100px;
}

.image-item img {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

.image-item .el-icon-delete {
  position: absolute;
  top: 5px;
  right: 5px;
  color: red;
  cursor: pointer;
}

.button-container {
  display: block;
  gap: 10px;
  margin-top: 20px;
  text-align: center;
}
</style>
